<template>
  <div class="table_list_fix">
    <!-- <Spin size="large" fix v-if="loading"></Spin> -->
    <!-- 扩展性内容 -->
    <slot name="content_context" />
    <pl-table
      ref="plTable"
      size="mini"
      :row-height="45"
      border="border"
      use-virtual
      v-loading="loading"
      :data="dataSource"
      :height="tableHeight"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      @selection-change="handleSelectRow"
      :data-changes-scroll-top="false"
      @sort-change="handleSortChange"
    >
      <template v-for="column in columns">
        <pl-table-column
          v-if="!column.children"
          :key="column.key"
          :prop="column.key"
          :label="column.title"
          :property="column.key"
          :type="column.type"
          :align="column.align"
          :min-width="column.width || 120"
          :fixed="column.fixed"
          :formatter="column.formatter"
          :sortable="column.sortable"
          :show-overflow-tooltip="isShowTooltip && !column.notShowTip"
        >
          <template v-if="column.required" slot="header">
            <span style="color: #ed4014">*</span><span>{{ column.title }}</span>
          </template>
          <template v-if="column.render" v-slot="scope">
            <table-column
              :index="scope.$index"
              :row="scope.row"
              :col="scope.column"
              :render="column.render"
            />
          </template>
          <template v-else-if="column.key === 'action'" v-slot="scope">
            <el-button type="text" size="small" @click="handleCancelSelect(scope.row, scope.$index)">删除</el-button>
          </template>
          <template v-else-if="column.errorTip" v-slot="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row[scope.column.property]" placement="top-start">
              <div class="costom_tooltip">{{ scope.row[scope.column.property] }}</div>
            </el-tooltip>
          </template>
          <!-- select -->
          <template v-else-if="column.type === 'select'" v-slot="scope">
            <el-select
              v-model="scope.row[scope.column.property]"
              :disabled="column.disabled"
              :clearable="column.clearable"
              placeholder="请选择"
            >
              <el-option
                v-for="item in column.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
          <!-- salePriceSelect -->
          <template v-else-if="column.type === 'salePriceSelect'" v-slot="scope">
            <el-select
              v-model="scope.row[scope.column.property]"
              :disabled="column.disabled"
              placeholder="请选择"
              @change="val => { handleChangeSelect({ val, row: scope.row, index: scope.$index, columnName: scope.column.property }) }"
            >
              <el-option
                v-for="(item, index) in scope.row.options"
                :key="item.saleCityNo + index"
                :label="item.saleCityName"
                :value="item.saleCityNo">
              </el-option>
            </el-select>
          </template>
          <!-- input -->
          <template v-else-if="column.type === 'input'" v-slot="scope">
            <el-input
              v-model.trim="scope.row[scope.column.property]"
              :disabled="column.disabled"
            />
          </template>
          <!-- inputHasMaxLength -->
          <template v-else-if="column.type === 'inputHasMaxLength'" v-slot="scope">
            <el-input
              v-model.trim="scope.row[scope.column.property]"
              :disabled="column.disabled"
              :maxlength="column.maxlength"
            />
          </template>
          <!-- inputNumChange -->
          <template v-else-if="column.type === 'inputNumChange'" v-slot="scope">
            <input-number
              v-model="scope.row[scope.column.property]"
              controls-position="right"
              :min="0"
              :max="(column.max == undefined || column.max == null) ? 99999999 : column.max"
              :disabled="column.disabled"
              :controls="column.controls"
              :precision="column.precision"
              @change="handleChangeInputNumber({ row: scope.row, index: scope.$index, columnName: scope.column.property })"
            />
          </template>
          <!-- inputSpecialNum -->
          <template v-else-if="column.type === 'inputSpecialNum'" v-slot="scope">
            <input-number
                v-model="scope.row[scope.column.property]"
                controls-position="right"
                :min="0"
                :max="99999999"
                :disabled="column.disabled"
                :precision="column.precision"
              />
          </template>
        </pl-table-column>
        <pl-table-column
          v-else
          :key="column.title"
          :label="column.title"
        >
          <template v-if="column.required" slot="header">
            <span style="color: #ed4014">*</span><span>{{ column.title }}</span>
          </template>
          <template v-for="child in column.children">
            <pl-table-column
              v-if="!child.children"
              :key="child.title"
              :label="child.title"
              :prop="child.key"
              :property="child.key"
              :align="child.align"
              :width="child.width || 120"
              :fixed="child.fixed"
              :formatter="child.formatter"
              :show-overflow-tooltip="true"
            >
              <template v-if="child.required" slot="header">
                <span style="color: #ed4014">*</span><span>{{ child.title }}</span>
              </template>
              <template v-if="child.render" v-slot="scope">
                <table-column
                  :index="scope.$index"
                  :row="scope.row"
                  :col="scope.column"
                  :render="child.render"
                />
              </template>
              <!-- select -->
              <template v-else-if="child.type === 'select'" v-slot="scope">
                <el-select
                  v-model="scope.row[scope.column.property]"
                  :disabled="child.disabled"
                  :clearable="child.clearable"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in column.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
              <!-- selectSpecial -->
              <template v-else-if="child.type === 'selectSpecial'" v-slot="scope">
                <el-select :disabled="child.disabled" v-model="scope.row[scope.column.property]" placeholder="请选择">
                  <el-option
                    v-for="item in scope.row[child.options]"
                    :key="item.optionValue"
                    :label="item.optionHtml"
                    :value="item.optionValue">
                  </el-option>
                </el-select>
              </template>
              <!-- input -->
              <template v-else-if="child.type === 'input'" v-slot="scope">
                <el-input
                  v-model.trim="scope.row[scope.column.property]"
                  :disabled="child.disabled"
                />
              </template>
              <!-- inputHasMaxLength -->
              <template v-else-if="child.type === 'inputHasMaxLength'" v-slot="scope">
                <el-input
                  v-model.trim="scope.row[scope.column.property]"
                  :disabled="child.disabled"
                  :maxlength="child.maxlength"
                />
              </template>
              <!-- inputNumChange -->
              <template v-else-if="child.type === 'inputNumChange'" v-slot="scope">
                <input-number
                  v-model="scope.row[scope.column.property]"
                  controls-position="right"
                  :min="0"
                  :max="(child.max == undefined || child.max == null) ? 99999999 : child.max"
                  :disabled="child.disabled"
                  :controls="child.controls"
                  :precision="child.precision"
                  @change="handleChangeInputNumber({ row: scope.row, index: scope.$index, columnName: scope.column.property })"
                />
              </template>
              <!-- inputSpecialNum -->
              <template v-else-if="child.type === 'inputSpecialNum'" v-slot="scope">
                <input-number
                  v-model="scope.row[scope.column.property]"
                  controls-position="right"
                  :min="0"
                  :max="99999999"
                  :disabled="child.disabled"
                  :precision="child.precision"
                />
              </template>
              <!-- inputChange -->
              <template v-else-if="child.type === 'inputChange'" v-slot="scope">
                <el-input
                  v-model.trim="scope.row[scope.column.property]"
                  :disabled="child.disabled"
                  @change="((val)=>{ handleRowInputModify({ row: scope.row, val, columnName: scope.column.property, index: scope.$index }) })"
                  @input="((val)=>{ handleRegularCheck({ row: scope.row, val, regular: child.regular, columnName: scope.column.property, index: scope.$index }) })"
                />
              </template>
            </pl-table-column>
            <pl-table-column
              v-else
              :key="child.title"
              :label="child.title"
            >
              <template v-if="child.required" slot="header">
                <span style="color: #ed4014">*</span><span>{{ child.title }}</span>
              </template>
              <pl-table-column
                v-for="grandson in child.children"
                :key="grandson.key"
                :prop="grandson.key"
                :label="grandson.title"
                :property="grandson.key"
                :align="grandson.align"
                :width="grandson.width || 120"
                :formatter="grandson.formatter"
                :show-overflow-tooltip="true"
              >
                <template v-if="grandson.render" v-slot="scope">
                  <table-column
                    :index="scope.$index"
                    :row="scope.row"
                    :col="scope.column"
                    :render="grandson.render"
                  />
                </template>
                <!-- select -->
                <template v-else-if="grandson.type === 'select'" v-slot="scope">
                  <el-select
                    v-model="scope.row[scope.column.property]"
                    :disabled="grandson.disabled"
                    :clearable="grandson.clearable"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in column.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
                <!-- input -->
                <template v-else-if="grandson.type === 'input'" v-slot="scope">
                  <el-input
                    v-model.trim="scope.row[scope.column.property]"
                    :disabled="grandson.disabled"
                  />
                </template>
                <!-- inputHasMaxLength -->
                <template v-else-if="grandson.type === 'inputHasMaxLength'" v-slot="scope">
                  <el-input
                    v-model.trim="scope.row[scope.column.property]"
                    :disabled="grandson.disabled"
                    :maxlength="grandson.maxlength"
                  />
                </template>
                <!-- inputNumChange -->
                <template v-else-if="grandson.type === 'inputNumChange'" v-slot="scope">
                  <input-number
                    v-model="scope.row[scope.column.property]"
                    controls-position="right"
                    :min="0"
                    :max="(grandson.max == undefined || grandson.max == null) ? 99999999 : grandson.max"
                    :disabled="grandson.disabled"
                    :controls="grandson.controls"
                    :precision="grandson.precision"
                    @change="handleChangeInputNumber({ row: scope.row, index: scope.$index, columnName: scope.column.property })"
                  />
                </template>
                <!-- inputSpecialNum -->
                <template v-else-if="grandson.type === 'inputSpecialNum'" v-slot="scope">
                  <input-number
                    v-model="scope.row[scope.column.property]"
                    controls-position="right"
                    :min="0"
                    :max="99999999"
                    :disabled="grandson.disabled"
                    :precision="grandson.precision"
                  />
                </template>
              </pl-table-column>
            </pl-table-column>
          </template>
        </pl-table-column>
      </template>
      <pl-table-column
        align="center"
        v-if="showActionCol"
        :fixed="actionColFixed"
        :min-width="actionColWidth"
        :label="actionColLabel">
        <template slot-scope="scope">
          <table-column
            :index="scope.$index"
            :row="scope.row"
            :col="scope.column"
            :render="actionRender"
          />
        </template>
      </pl-table-column>
    </pl-table>
    <!-- table表格 -->

    <!-- 分页部分 -->
    <div v-if="showPagination" class="pagination-container">
      <el-pagination
        :total="total"
        :current-page="pagination.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handlePageChange"
        @size-change="handlePageSize"
      />
    </div>
    <div v-if="!showPagination">
      <span class="total-num">共 {{ dataSource.length || 0 }} 条</span>
    </div>
  </div>
</template>

<script>
import tableColumn from '../tableColumn';
import inputNumber from '@/components/inputNumber/inputNumber'
import { handleSortCompare } from '@/utils/bizUtils'

export default {
  name: 'BasicList',
  components: {
    tableColumn,
    inputNumber
  },
  props: {
    dataSource: {
      type: Array,
      default () {
        return [];
      },
    },
    columns: {
      type: Array,
      default () {
        return [];
      },
    },
    actionColFixed: {
      type: [Boolean, String],
      default: 'right',
    },
    showActionCol: {
      type: Boolean,
      default: false,
    },
    tableHeight: {
      type: Number,
      default: 600,
    },
    actionColWidth: {
      type: Number,
      default: 100,
    },
    actionColLabel: {
      type: String,
      default: '操作',
    },
    actionRender: {
      type: Function,
      default: () => {},
    },
    border: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    showPagination: {
      type: Boolean,
      default: false,
    },
    pagination: {
      type: Object,
      default () {
        return {};
      },
    },
    total: {
      type: Number,
      default: 0,
    },
    isShowTooltip: {
      type: Boolean,
      default: true,
    }
  },

  data () {
    return {
      multipleSelection: [],
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.$emit('toggleRowSelection', this.$refs.multipleTable);
    });
  },
  methods: {
    /* 正则校验方法，输入不符合条件的内容给设成空串 */
    handleRegularCheck (data) {
      let { row, val, regular, columnName } = data
      if (!regular) { return }
      let replaceVal = _.replace(val, regular, '')
      row[columnName] = replaceVal
    },
    handleRowInputModify (data) {
      this.$emit('handleRowInputModify', data)
    },
    handleChangeInputNumber (data) {
      this.$emit('handleChangeInputNumber', data)
    },
    handleCancelSelect (row, index) {
      this.$emit('handleCancelSelect', { row, index });
    },
    handlePageChange (current) {
      this.$emit('pageChange', current);
    },
    handlePageSize (length) {
      this.$emit('pageSizeSelect', length);
    },
    handleSelectRow (data) {
      this.$emit('handleSelectRow', data)
    },
    handleChangeSelect (data) {
      this.$emit('handleChangeSelect', data)
    },
    handleClearSelections () {
      this.$refs.plTable.clearSelection();
    },
    // 排序
    handleSortChange ({ prop, order }) {
      this.dataSource.sort(handleSortCompare(prop, order))
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-table thead.is-group th {
  background: #fff;
}
.pagination-container {
    text-align: right;
    padding-right: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.total-num {
  margin-top: 5px;
  float: right;
}
</style>
